import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { differenceInCalendarDays } from 'date-fns';
@Component({
  selector: 'app-cost-analysis',
  templateUrl: './cost-analysis.component.html',
  styleUrls: ['./cost-analysis.component.scss'],
  providers: [
    DatePipe
  ]
})
export class CostAnalysisComponent implements OnInit {
  today = new Date();
  currentMonth = `${new Date().getFullYear()}-${new Date().getMonth() + 1}-1`;
  searchParams = {
    start_date: this.datePipe.transform(this.currentMonth, 'yyyy-MM-dd HH:mm:ss'),
    end_date: this.datePipe.transform(this.today, 'yyyy-MM-dd HH:mm:ss'),
    doctor: '全部',
    department: '全部',
    type: '全部',
    '病人性质': '全部'
  };
  anySearchRes = {
    start_date: this.datePipe.transform(this.currentMonth, 'yyyy-MM-dd HH:mm:ss'),
    end_date: this.datePipe.transform(this.today, 'yyyy-MM-dd HH:mm:ss'),
    doctor: '全部',
    department: '全部',
    type: '全部'
  };
  keshiOptions: any = [];
  yishengOptions: any = [];
  resultsObj = null;
  feiyongOptions: any;
  dachufangOptions: any;
  dakeshiOptions: any;
  moreGongxiaoTableData = true;
  gongxiaoTableData: any = {};
  constructor(public http: HttpClient, public datePipe: DatePipe) {
  }
  disabledDate = (current: Date): boolean => {
    // Can not select days before today and today
    return differenceInCalendarDays(current, this.searchParams['start_date']) < 0 || differenceInCalendarDays(current, this.searchParams['start_date']) === 0;
  }

  /**
   * @description 搜索方法
   */
  onSubmit() {
    this.searchParams.start_date = this.datePipe.transform(this.searchParams['start_date'], 'yyyy-MM-dd HH:mm:ss');
    this.searchParams.end_date = this.datePipe.transform(this.searchParams['end_date'], 'yyyy-MM-dd HH:mm:ss');
    this.anySearchRes = JSON.parse(JSON.stringify(this.searchParams));
    const params = {
      params: this.searchParams
    };
    this.http.get(window.API_ROOT + 'api/statistics/cost', params).toPromise().then((res: any) => {
      console.log(res);
      this.resultsObj = res.data;
      this.createFeiyong();
      this.createChufang();
      this.createDachufang();
      this.getGongxiaofenxi();
    });
  }

  /**
  * @description 获取科室
  */
  getKeshi() {
    const params = {
      params: {
        value: ''
      }
    };
    this.http.get(window.API_ROOT + 'api/recipes/departments', params).toPromise().then((res: any) => {
      console.log(res);
      this.keshiOptions = res.data;
    });
  }
  /**
  * @description 获取医生
  */
  getYisheng() {
    const params = {
      params: {
        '科室': this.searchParams['department']
      }
    };
    this.http.get(window.API_ROOT + 'api/recipes/doctors', params).toPromise().then((res: any) => {
      console.log(res);
      this.yishengOptions = res.data;
    });
  }

  /**
   * @description 费用占比分布
   */
  createFeiyong() {
    this.feiyongOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {d}%'
      },
      color: ['#4F81BC', '#C0504E', '#9BBB58', '#8165A2', '#4AACC5'],
      series: [
        {
          type: 'pie',
          radius: ['30%', '70%'],
          avoidLabelOverlap: true,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                formatter: '{b}{d}%',
                textStyle: { // 数值样式
                  color: '#000',
                  fontSize: 16
                }
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: this.resultsObj['费用占比分布'].data
        }
      ]
    };
  }

  /**
   * 大处方概况
   */
  createChufang() {
    this.dachufangOptions = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
      },
      grid: {
        left: '2%',
        right: '0%',
        top: 0,
        bottom: '13%',
        containLabel: true
      },
      series: [
        {
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          label: {
            normal: {
              position: 'inner',
              formatter: '{b}\n {d}%',
              textStyle: {
                fontWeight: 'normal',
                fontSize: 15,
                color: 'white'
              }
            }
          },
        data: this.resultsObj['大处方概况'].data,
        }
      ]
    };
  }

  /**
   * @description 大处方科室分布
   */
  createDachufang() {
    this.dakeshiOptions = {
      tooltip: {
      },
      color: ['#C0504E', '#FFC000', '#01B0F1'],
      grid: {
        left: '2%',
        right: '16%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        show: false
      },
      yAxis: {
        type: 'category',
        splitLine: { show: false }, // 改设置不显示坐标区域内的y轴分割线
        // data: ['配伍禁忌', '药物超标', '药物重复'],
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 16
          }
        },
        data: this.resultsObj['大处方科室分布'].name
      },
      series: [
        {
          type: 'bar',
          barWidth: 30,
          data: this.resultsObj['大处方科室分布'].data,
          // data: [18203, 23489, 29034],
          itemStyle: {
            normal: {
              color: params => {
                const colorList = ['#E6E0EC', '#FAC090', '#012060', '#0071C1', '#92D051', '#FFBF01', '#C00000'];
                return colorList[params.dataIndex];
              },
              label: {
                show: true,
                position: 'right',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 16
                }
              }
            }
          }
        }
      ]
    };
  }

    /**
   * @description 大处方科室分布表格
   */
  getGongxiaofenxi() {
    this.moreGongxiaoTableData = !this.moreGongxiaoTableData;
    if (!this.moreGongxiaoTableData) {
      this.gongxiaoTableData = JSON.parse(JSON.stringify(this.resultsObj['大处方科室分布-明细']));
      this.gongxiaoTableData['bodys'] = JSON.parse(JSON.stringify(this.resultsObj['大处方科室分布-明细']['bodys'].slice(0, 5)));
    } else {
      this.gongxiaoTableData = JSON.parse(JSON.stringify(this.resultsObj['大处方科室分布-明细']));
      this.gongxiaoTableData['bodys'] = JSON.parse(JSON.stringify(this.resultsObj['大处方科室分布-明细']['bodys']));
    }
  }


  ngOnInit() {
    this.onSubmit();
    this.getKeshi();
    this.getYisheng();

  }

}
